<template>
  <div class="company">
    <div class="company-top">
      <van-row gutter="20">
        <van-col span="20">
          <van-search
            v-model="value"
            placeholder="智能匹配"
            @search="onSearch(value)"
            @blur="onBlur"
          >
            <template slot="left-icon"
              ><van-icon name="search" @click="onSearch"
            /></template>
          </van-search>
        </van-col>
        <van-col span="4">
          <select name="selectCity" class="selectCity">
            <option value="" class="option">长沙</option>
            <option value="">南京</option>
            <option value="">杭州</option>
            <option value="">宁波</option>
          </select>
        </van-col>
      </van-row>
    </div>
    <!-- 弹层 -->
    <div class="pop" v-show="pop">
      <van-popup
        v-model="show"
        closeable
        close-icon="close"
        position="bottom"
        :style="{ height: '75%' }"
        overlay="overlay"
      >
        <IntelligentMatch :companyInfo="list"></IntelligentMatch>
      </van-popup>
    </div>
    <div class="button">
      <van-button
        round
        type="info"
        v-for="(item, index) in business"
        :key="index"
        @click="btnRender(item)"
      >
        <span v-html="item">{{ item }}</span>
      </van-button>
      <!-- {{ item }} -->
      <van-button round type="info" @click="showPopup">查看全部</van-button>
    </div>
    <div class="bg"></div>
    <!-- </van-popup> -->
    <div class="companny-buttom">
      <CompanyInfo :companyInfo="list"></CompanyInfo>
    </div>
  </div>
</template>

<script>
import { companyInfo, companyInfoJSON } from '@/api/company'
import CompanyInfo from './components/company.vue'
import IntelligentMatch from './components/intelligentMatch.vue'
import { companyMatch } from '@/api/staff'
import { debounce } from 'lodash'
export default {
  name: 'CompanyIndex',
  components: {
    CompanyInfo,
    IntelligentMatch,
  },
  data() {
    return {
      value: '',
      show: true,
      list: [],
      pop: false,
      overlay: false,
      business: JSON.parse(localStorage.getItem('BUSINESS') || '[]'), //存放职业的数组
      // companyInfo: [],
    }
  },
  methods: {
    async onSearch(val) {
      // this.$toast(val)
      //如果搜索框为空的话则弹出提示
      //val:搜索框输入的值 bussiness：按钮数组内的值
      if (val.trim() !== '') {
        const busy = this.business.find((item) => {
          return item === this.val ? item : ''
        })
        // this.business = [val, ...this.business]
        // console.log(this.business)
        if (this.val === busy) {
          //输入框内val与button中单个按钮相等
          const res = await companyInfo(this.value)
          this.list = res.data
          return
        } else {
          this.business.unshift(val)
          //单个按钮
          localStorage.setItem('BUSINESS', JSON.stringify(this.business))
        }
      } else {
        this.$toast.fail('输入不能为空')
      }
    },
    onBlur() {
      this.companyInfoJSON()
    },
    showPopup() {
      this.pop = true
    },
    async companyInfoJSON() {
      if (this.business.length === 0) {
        const compannyJSON = await companyInfoJSON()
        this.business = compannyJSON.data
      }
    },
    async companyInfoa() {
      const res = await companyInfo(this.value)
      this.list = res.data
    },
    btnRender(prof) {
      //点击按钮数组内事件
      this.value = prof
      this.onSearch(prof)
    },
  },
  created() {
    this.companyInfoa()
    companyMatch()
    this.companyInfoJSON()
  },
  watch: {
    value() {
      // function debounce(fn)
      // debounce(function () {
      //   console.log(11)
      //   // this.companyInfoa()
      //   this.onSearch()
      // }, 200)
    },
    business: {
      deep: true,
      handler() {
        localStorage.setItem('BUSINESS', JSON.stringify(this.business))
      },
    },
  },
}
</script>

<style scoped lang="less">
.company {
  .active {
    color: red;
  }
  .company-top {
    background-color: rgba(63, 81, 181, 100);
    .van-search {
      margin: 22px 64px 19px 16px;
      width: 590px;
      height: 70px;
      border-radius: 10px 10px 10px 10px;
      background-color: rgba(247, 248, 250);
      text-align: center;
    }
    .selectCity {
      background-color: rgba(63, 81, 181, 100);
      border: 0ch;
      color: #fff;
      margin-top: 40px;
      .option {
        background-color: #fff;
      }
    }
  }
  .button {
    margin: 0 auto;
    margin-left: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .bg {
    background-color: rgba(249, 245, 245, 100);
    height: 20px;
    margin-top: 20px;
  }
  .van-popup {
    width: 100%;
    height: 80%;
  }
  .van-button--info {
    border: 1px solid rgba(151, 145, 145, 100);
    margin-right: 27px;
    color: rgba(151, 145, 145, 100);
    height: 52px;
    line-height: 20px;
    font-size: 12px;
    background-color: #fff;
    .van-button__content {
      text-align: center;
      line-height: 52px;
    }
  }
}
</style>
